<!--
 * @Autor: dingxiaolin
 * @Date: 2021-05-14 09:38:38
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-05-18 13:11:11
-->
<template>
    <div class="selection">
        <div class="titlebar" @click="goListPage">
            整机月回款金额 <span class="digi">{{ total }}</span> <span class="unit">(万元)</span>
        </div>
        <yearMonth @emit="getTime"></yearMonth>
    </div>
    <div class="iconbar">
        <div><img src="@/assets/pianqu.png" alt="" />片区</div>
        <div><img src="@/assets/xiaoliang.png" alt="" />回款</div>
    </div>
    <div class="table" v-for="(item, i) in list" :key="i">
        <div class="name">{{ item.name }}</div>
        <div class="value">{{ item.value }}</div>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType, reactive, toRefs, watch, computed, nextTick, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Combine } from '@/http';
import { type } from '@/http/interface';
import { YearMonth } from '@/components';
import dateJs from 'dayjs';

export default defineComponent({
    name: 'monthTable',
    components: { YearMonth },
    props: {},
    emits: [],
    setup(props, ctx) {
        const router = useRouter();
        const state = reactive({
            total: 0,
            startTime: dateJs(new Date()).format('YYYY-MM'),
            endTime: '',
            pq: '',
            list: [] as any,
        });
        onMounted(() => {
            let time = dateJs(state.startTime).add(1, 'month');
            state.endTime = time['$y'] + '-' + addZeroPrefix(time['$M'] + 1);
            getData();
        });
        function addZeroPrefix(n) {
            const str = n.toString();
            return str[1] ? str : `0${str}`;
        }
        const goListPage = () => {
            router.push('/hkTable')
        }
        const getTime = (v) => {
            state.startTime = v;
            let time = dateJs(v).add(1, 'month');
            state.endTime = time['$y'] + '-' + addZeroPrefix(time['$M'] + 1);
            getData();
        };
        const getPq = (v) => {
            state.pq = v;
            getData();
        };
        const getData = () => {
            const formList = {
                pq: state.pq == '全部' ? '' : state.pq,
                startTime: state.startTime,
                endTime: state.endTime,
            };
            Combine.GetPayBackByModel(formList).then((res: any) => {
                let list = [
                    { name: '江苏', value: 0 },
                    { name: '黑龙江', value: 0 },
                    { name: '安徽', value: 0 },
                    { name: '湖南', value: 0 },
                    { name: '河南', value: 0 },
                    { name: '其他', value: 0 },
                ];
                state.list = [];
                list.forEach((item, index) => {
                    res.forEach((v, i) => {
                        if (item.name == v.arg1) {
                            state.list.push({ name: v.arg1, value: v.val1 });
                        }
                    });
                });
                state.total = res.reduce((total, v) => total + v.val1, 0);
            });
        };
        return {
            ...toRefs(state),
            getTime,
            getPq,
            goListPage
        };
    },
});
</script>

<style lang="scss" scoped>
</style>
